<template>
	<view class="note5W1H">
		<view class="bg">
			<div class="js-warp-hide bg-gray-dark-mktg d-flex flex-auto flex-column overflow-hidden position-relative"
				style="width: 100vw;height: 100%;">
				<div class="sky-space">
					<div class="sky-stars"></div>
					<div class="sky-stars"></div>
					<div class="sky-stars"></div>
					<div class="sky-stars"></div>
					<div class="sky-stars"></div>
					<div class="sky-stars"></div>
				</div>
				<div class="sky-space-bg">
					<div class="sky-bg-stars"></div>
					<div class="sky-bg-stars"></div>
					<div class="sky-bg-stars"></div>
					<div class="sky-bg-stars"></div>
				</div>
			</div>
		</view>


		<view class="main">
			<view class="grid">
				<noteview5W1H   class='i1' :pram="sub1Pram">
				</noteview5W1H>
				<noteview5W1H  class='i2' :pram="sub2Pram">
				</noteview5W1H>
				<noteview5W1H  class='i3' :pram="sub3Pram">
				</noteview5W1H>
				<noteview5W1H  class='i4' :pram="sub4Pram">
				</noteview5W1H>
				<noteview5W1H class='i5' :pram="sub5Pram">
				</noteview5W1H>
				<noteview5W1H  class='i6':pram="sub6Pram">
				</noteview5W1H>
			</view>
		</view>







	</view>


</template>

<script>
	import noteview5W1H from "../../components/noteview5W1H/noteview5W1H.vue"
	export default {
		components: {
			noteview5W1H
		},
		data() {
			return {
				sub1Pram: {
picture: "../../static/5w1himages/what.png",
					content: "　亡是公听然而笑曰：“楚则失矣，而齐亦未为得也。夫使诸侯纳贡者，非为财币，所以述职也。封疆画界者，非为守御，所以禁淫也。"
				},
				sub2Pram: {
					picture: "../../static/5w1himages/when.png",
					content: ""
				},
				sub3Pram: {
					picture: "../../static/5w1himages/where.png",
					content: ""
				},
				sub4Pram: {
					picture: "../../static/5w1himages/who.png",
					content: "哈哈哈哈"
				},
				sub5Pram: {
					picture: "../../static/5w1himages/why.png",
					content: "哈哈哈哈"
				},
				sub6Pram: {
					picture: "../../static/5w1himages/how.png",
					content: "哈哈哈哈"
				},
			};
		},
		onLoad(options) {},
		methods: {
			navigateToEdit() {
				uni.navigateTo({
					url: "../../pages/noteEdit/noteEdit"
				})
			}
		}
	};
</script>

<style >

.note5W1H{
	height: 1550rpx;
}


	.grid {
		height:100%;
		width: 100%;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		row-gap: 50.23rpx;
		column-gap: 30.33rpx;
		background-color: ;
	}
.i1{
  margin-top: 50rpx;
  margin-left: 40rpx;
  animation-name: mymove1;
  animation-duration: 5s;
  animation-iteration-count: infinite;;
}
.i2{
  margin-top: 100rpx;
   margin-right: 200rpx;
   animation-name: mymove2;
   animation-duration: 5s;
   animation-iteration-count: infinite;;
}
.i3{
	animation-name: mymove1;
	animation-duration: 5s;
	animation-iteration-count: infinite;;
  margin-top: 20rpx;
   margin-left: 40rpx;
  white-space: nowrap;
}
.i4{
  margin-top: 70rpx;
   margin-right: 40rpx;
   animation-name: mymove2;
   animation-duration: 5s;
   animation-iteration-count: infinite;;
}
.i5{
  margin-top: 30rpx;
   margin-left: 40rpx;
  white-space: nowrap;
  animation-name: mymove1;
  animation-duration: 5s;
  animation-iteration-count: infinite;;
}
.i6{
  margin-top: 70rpx;
   margin-right: 40rpx;
   animation-name: mymove2;
   animation-duration: 5s;
   animation-iteration-count: infinite;;
}
	.bg {
		width: 100%;
		height: 100%;
	}

	.main {
		z-index: 10;
		top: 0;
		width: 100%;
		position: absolute;

	}





	@keyframes mymove1 {
		0% {
			transform: translate(0px, 0px);
		}

		50% {
			transform: translate(0px, -10px);
		}

		100% {
			transform: translate(0px, 0px);
		}

	}

	@keyframes mymove2 {
		0% {
			transform: translate(0px, 0px);
		}

		50% {
			transform: translate(0px, 10px);
		}

		100% {
			transform: translate(0px, 0px);
		}
	}

	.middlepic {
		position: relative;
		margin: 0 auto;

	}


	.page {
		padding: 303.49rpx 27.91rpx 638.37rpx;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;

		.group {
			padding: 0 118.6rpx;
		}

		.section image {
			border-radius: 50%;
			width: 174.42rpx;
			height: 174.42rpx;
		}
	}

	.space-y-46 {

		&>view:not(:first-child),
		&>text:not(:first-child),
		&>image:not(:first-child) {
			margin-top: 80.23rpx;
		}
	}

	/* body {
		margin: 0;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
			'Droid Sans', 'Helvetica Neue', 'Microsoft Yahei', sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	view,
	image, */
	text {
		box-sizing: border-box;
		flex-shrink: 0;
	}

	/* 	#app {
		width: 100vw;
		height: 100vh;
	} */

	.flex-row {
		display: flex;
		flex-direction: row;
	}

	.flex-col {
		display: flex;
		flex-direction: column;
	}

	.justify-start {
		justify-content: flex-start;
	}

	.justify-end {
		justify-content: flex-end;
	}

	.justify-center {
		justify-content: center;
	}

	.justify-between {
		justify-content: space-between;
	}

	.justify-around {
		justify-content: space-around;
	}

	.justify-evenly {
		justify-content: space-evenly;
	}

	.items-start {
		align-items: flex-start;
	}

	.items-end {
		align-items: flex-end;
	}

	.items-center {
		align-items: center;
	}

	.items-baseline {
		align-items: baseline;
	}

	.items-stretch {
		align-items: stretch;
	}

	.self-start {
		align-self: flex-start;
	}

	.self-end {
		align-self: flex-end;
	}

	.self-center {
		align-self: center;
	}

	.self-baseline {
		align-self: baseline;
	}

	.self-stretch {
		align-self: stretch;
	}

	.flex-1 {
		flex: 1 1 0%;
	}

	.flex-auto {
		flex: 1 1 auto;
	}

	.grow {
		flex-grow: 1;
	}

	.grow-0 {
		flex-grow: 0;
	}

	.shrink {
		flex-shrink: 1;
	}

	.shrink-0 {
		flex-shrink: 0;
	}

	.relative {
		position: relative;
	}



	body {
		margin: 0;
		padding: 0;
	}

	.bg-gray-dark-mktg {
		background-image: radial-gradient(#acb4f4, #8952ff);
	}

	.d-flex {
		display: flex !important;
	}

	.overflow-hidden {
		overflow: hidden !important;
	}

	.position-relative {
		position: relative !important;
	}

	.flex-auto {
		flex: auto !important;
	}

	.flex-column {
		flex-direction: column !important;
	}

	.sky-space-bg {
		position: absolute;
		top: 36vh;
		left: 42vw;
		height: 16vw;
		width: 16vw;
	}

	.sky-bg-stars {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		overflow: hidden;
		background-image: radial-gradient(1px 2px at 50px 50px, #eee, rgba(0, 0, 0, 0)), radial-gradient(2px 3px at 20px 35px, #fff, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 60px 20px, #ddd, rgba(0, 0, 0, 0));
		background-repeat: repeat;
		background-size: 200px 200px;
		opacity: 0.2;
		animation: opacity 8s infinite;
	}

	.sky-bg-stars:nth-child(1) {
		background-position: 0% 90%;
		animation-delay: 0s;
	}

	.sky-bg-stars:nth-child(2) {
		background-position: 50% 10%;
		animation-delay: 0.6s;
	}

	.sky-bg-stars:nth-child(3) {
		background-position: 40% -80%;
		background-size: 120px 200px;
		animation-delay: 1.8s;
	}

	.sky-bg-stars:nth-child(4) {
		background-position: 150% -80%;
		background-size: 220px 100px;
		animation-delay: 3.2s;
	}

	.sky-space,
	.sky-stars {
		position: absolute;
		top: 0;
		right: 5vw;
		bottom: 0;
		left: 5vw;
		overflow: hidden;
	}

	.sky-stars {
		background-image: radial-gradient(2px 2px at 50px 200px, #eee, rgba(0, 0, 0, 0)), radial-gradient(3px 3px at 40px 60px, #fff, rgba(0, 0, 0, 0)), radial-gradient(4px 5px at 100px 30px, #ddd, rgba(0, 0, 0, 0));
		background-repeat: repeat;
		background-size: 380px 380px;
		opacity: 0;
		animation-name: zoom;
		animation-delay: 0s;
		animation-duration: 10s;
		animation-timing-function: ease-out;
		animation-iteration-count: infinite;
	}

	.sky-stars:nth-child(1) {
		/* background-image:radial-gradient(
	          2px 2px at 50px 200px,#fff
	        ),radial-gradient(2px 3px at 40px 70px,#fff),radial-gradient(3px 4px at 120px 40px,#fff);
		*/
		top: 20vh;
		bottom: 20vh;
		left: 10vw;
		right: 10vw;
		background-size: 120px 120px;
		background-position: 10% 90%;
	}

	.sky-stars:nth-child(2) {
		background-position: 20% 50%;
		animation-delay: 0.3s;
	}

	.sky-stars:nth-child(3) {
		background-position: 40% 20%;
		animation-delay: 1.3s;
	}

	.sky-stars:nth-child(4) {
		background-position: 50% 10%;
		background-size: 200px 200px;
		transform: rotate(60deg);
		animation-delay: 2.1s;
	}

	.sky-stars:nth-child(5) {
		background-position: 30% 30%;
		background-size: 120px 270px;
		animation-delay: 3s;
	}

	.sky-stars:nth-child(6) {
		background-position: 50% 20%;
		animation-delay: 5.5s;
	}

	@keyframes opacity {
		0% {
			opacity: 0.2;
			transform: rotate(-5deg);
			animation-timing-function: ease-in;
		}

		50% {
			opacity: 0.8;
			transform: rotate(-13deg);
			animation-timing-function: ease-in;
		}

		100% {
			opacity: 0.1;
			transform: rotate(-20deg);
			animation-timing-function: ease-in;
		}
	}

	@keyframes zoom {
		0% {
			opacity: 0.02;
			transform: scale(0.1);
			transform: rotate(-20deg);
			animation-timing-function: ease-in;
		}

		5% {
			opacity: 0.05;
			/* transform:scale(0.3);
		*/
		}

		50% {
			opacity: 0.6;
			/* transform:scale(1.2);
		*/
		}

		75% {
			opacity: 0.3;
			transform: scale(1.8);
			/* transform:rotate(2deg);
		*/
		}

		100% {
			opacity: 0.1;
			transform: scale(2.2);
		}
	}
</style>